<template>
	<view class="index">
		
	   <banner v-if="adList.length > 0" :ad-list="adList" h=216.5></banner>
	   
	   <view class="scroll-goods" v-if="coupons.length > 0">
	   	<view class="title">店铺优惠券</view>
	   
	   	<view class="goods">
	   		<scroll-view class="scroll-coupon" scroll-x="true" @scroll="scroll">
	   			<view class="item" @tap="receive_coupon(coupon)" v-for="(coupon,index) in coupons" :key="index">
	   				<view class="amount">￥{{coupon.amount}}</view>	
					<view class="condition">满{{coupon.min_amount}}可用</view>
					<view class="time">{{coupon.start_time}}</view>
					<view class="time">至 {{coupon.end_time}}</view>
	   
	   			</view>
	   
	   		</scroll-view>
	   
	   	</view>
	   </view>
	   
	   <view class="action">
		   <view class="item" v-for="(item, index) in action" :key="index">
			   <image :src="item.app_image"></image>
		   </view>
	   </view>
	   
	   <goods-list :goods="recommend" showType="2"></goods-list>
	</view>
</template>

<script>
	import uniNavBar from '../../components/uni-nav-bar.vue';
	import uniIcon from '../../components/uni-icon.vue';
	import banner from '../../components/banner.vue';
	import Request from '../../common/request.js';
	import rowCategory from '../../components/row-category.vue';
	import scrollGoods from '../../components/scroll-goods.vue';
	import goodsList from '../../components/goods-list.vue';
	
	export default {
		components: {
			uniNavBar, uniIcon, banner, rowCategory, scrollGoods, goodsList
		},
		data() {
			return {
				
				adList: [],
				coupons: [],
				recommend: [],
				id: ''
			}
		},
		
		onLoad(options) {
			if(options.name) {
				uni.setNavigationBarTitle({
					title: options.name
				})
			}
			
			this.id = options.id;
			this.getIndexData();
			this.getCoupon();
		},
		
		onPullDownRefresh:function(){
			this.getIndexData(() => {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			//获取首页接口数据
			getIndexData: function(callback){
				var that = this;
				var params = {
					url: 'seller/index',
					needLogin: false,
					data: {
						id: that.id
					},
					sCallback: function(res) {
						that.adList = res.data.banner;
						that.recommend = res.data.recommend;
						callback && callback();
					}
				}
				
				Request.send(params);
			},
			//获取优惠 券
			getCoupon: function(){
				
				var url =  'seller/coupon';
				var that = this;
				Request.send({
					url: url,
					data: {
						id: that.id
					},
					sCallback: function(res) {
						that.coupons = res.data;
					}
				});
			},
			//领取优惠券
			receive_coupon: function(item) {
				if(item.receive_status == 1) {
					Request.alert('您已经领取过了');return;
				}

				
				var url =  'seller/receiveCoupon';
				var that = this;
				Request.send({
					url: url,
					data: {id: item.id},
					sCallback: function(res) {
						uni.showToast({
							title: res.msg
						})
						item.receive_status = 1;
					}
				})
			}
		}
	}
</script>

<style>
	.index {
		text-align: center;
		width: 750upx;
	}
	
	.scroll-goods {
		flex-direction: column;
		margin: 20upx 0;
	}
	
	.scroll-goods .title {
		line-height: 80upx;
		padding: 0 20upx;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		color: #e60012;
		font-size: 32upx;
		font-weight: 600;
		letter-spacing: 6upx;
		border-bottom: 1upx solid #eee;
	}
	
	
	.scroll-goods .coupon-goods {
		width: 100%;
		overflow: hidden;
		padding: 10upx;
		box-sizing: border-box;
		
	}
	
	.scroll-goods .scroll-coupon {
		white-space: nowrap;
		background: #fff;
		font-size: 24upx;
		padding: 20upx;
	}
	
	
	.scroll-goods .item {
		display: inline-flex;
		text-align: left;
		flex-direction: column;
		width: 500upx;
		margin-right: 20upx;
		padding: 20upx;
		box-sizing: border-box;
		background: #ffeee4;
		color: #FC5976;
		line-height: 50upx;
		border-radius: 10upx;
	}
	
	.scroll-goods .item .amount {
		font-size: 40upx;
	}
</style>
